<%
// Embeds a live sample from a interactive-examples.mdn.mozilla.net GitHub page
//
// Parameters:
//  $0 - The URL of interactive-examples.mdn.mozilla.net page (relative)
//  $1 - Optional custom height class to set on iframe element
//
//  Example call {{EmbedInteractiveExample("pages/css/animation.html", "taller")}}
//

const url = kuma.url.resolve(env.interactive_examples.base_url, $0);
let heightClass = 'is-default-height';

if ($0.includes('/js/')) {
  heightClass = 'is-js-height';
}

if ($1) {
  let supportedHeights = ['shorter', 'taller', 'tabbed-shorter', 'tabbed-standard', 'tabbed-taller'];
  let heightIsSupported = (supportedHeights.indexOf($1) > -1);

  if (heightIsSupported) {
    heightClass = 'is-' + $1 + '-height';
  } else {
    throw new Error(`An unrecognized second size parameter to EmbedInteractiveExample ('${$1}')`);
  }
}

%>
<h2>Try it</h2>
<iframe class="interactive <%= heightClass %>" height="200" src="<%= url %>" title="MDN Web Docs Interactive Example"></iframe>
